<script setup>
//导入axios，npm install axios
import axios from 'axios';
import {ref} from 'vue';
//发送异步请求，获取所以文章数据
axios.get('http://localhost:8080/article/getAll')
.then(result=>{
  //把服务器相应的数据保存起来
  articleList.value = result.data;
}).catch(err=>{
  console.log(err);
})
//定义响应式数据
const searchConditions = ref({
  category:'',
  state:''
})
//声明search函数
const search = function(){
  //发送请求，完成搜索
  axios.get('http://localhost:8080/article/search',{params:{...searchConditions.value}})
  .then(result=>{
    articleList.value=result.data
  })
  .catch(err=>{
    console.log(err);
  })
}

</script>

<template>
  <div>
    文章分类: <input type="text" v-modle="searchConditions.category"/>

    发布状态: <input type="text" v-modle="searchConditions.state"/>

    <button v-on:click="search">搜索</button>

    <br />
    <br />
    <table border="1 solid" colspa="0" cellspacing="0">
      <tr>
        <th>文章标题</th>
        <th>分类</th>
        <th>发表时间</th>
        <th>状态</th>
        <th>操作</th>
      </tr>
      <tr v-for="(article,index) in articleList" :key="index">
        <td>{{ article.title }}</td>
        <td>{{ article.category }}</td>
        <td>{{ article.time }}</td>
        <td>{{ article.state }}</td>
        <td>
          <button>编辑</button>
          <button>删除</button>
        </td>
      </tr>
      <tr>
        <td>标题2</td>
        <td>分类2</td>
        <td>2000-01-01</td>
        <td>已发布</td>
        <td>
          <button>编辑</button>
          <button>删除</button>
        </td>
      </tr>
      <tr>
        <td>标题3</td>
        <td>分类3</td>
        <td>2000-01-01</td>
        <td>已发布</td>
        <td>
          <button>编辑</button>
          <button>删除</button>
        </td>
      </tr>
    </table>
  </div>
</template>
